<template>
    <div class="list-container">
        <NavCard></NavCard>
        <BreadCrumb class="bread-crumb" />
        <h2 class="title">医疗机构列表</h2>
        <div class="detail">
            <el-input
                class="search-input"
                placeholder="请输入医师姓名搜索..."
                prefix-icon="el-icon-search"
                v-model="keyword">
            </el-input>
            <div class="table">
              <el-table v-loading="loading" @selection-change="handleSelectionChange"
                  :data="tableData"
                  border
                  fit
                  style="width: 100%"
                  header-cell-class-name="table-header-cell"
                  :class="tableData.length === 0 ? 'table-empty' : ''"
                >
                <el-table-column type="selection" width="55" align="center" />
                <el-table-column
                  label="序号"
                  type="index"
                  width="50">
                </el-table-column>
                <el-table-column label="医院名称" align="center" prop="name" />
                <el-table-column label="辖区" align="center" prop="areaname" />
                <el-table-column label="诊疗科目数" align="center" prop="medicalSpecialtiesValue" />
                <el-table-column label="监控数" align="center" prop="monitorValue" />
                <el-table-column label="白名单开关" align="center" prop="enabled" >
                  <template slot-scope="scope">
                    <el-tag v-if="scope.row.enabled == '0'">关</el-tag>
                    <el-tag v-else >开</el-tag>
                  </template>

                </el-table-column>>
                    <el-table-column label="">
                        <template slot-scope="scope">
                            <div class="edit-region" @click="editRegion(scope)">修改辖区</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="" width="300">
                        <template slot-scope="scope">
                            <div class="operation">
                                <div>查看</div>
                            </div>
                        </template>
                    </el-table-column>
              </el-table>
            </div>
          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />
        </div>
        <el-dialog
            v-if="editDialogVisible"
            title="修改辖区"
            :visible.sync="editDialogVisible"
            width="30%"
            :before-close="handleClose"
            class="edit-dialog"
            top="40vh"
        >
            <div class="edit-box">
                <div class="row1">
                    <el-select v-model="value" placeholder="请选择省">
                        <el-option
                        v-for="item in provinceOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                    <el-select v-model="value" placeholder="请选择市">
                        <el-option
                        v-for="item in cityOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div class="row2">
                    <el-select v-model="value" placeholder="请选择区/县">
                        <el-option
                        v-for="item in districtOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div class="submit">修改辖区</div>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import NavCard from '@/components/nav-card/index.vue'
import BreadCrumb from '@/components/bread-crumb/index.vue'
import { listNation, getNation, delNation, addNation, updateNation, exportNation } from "@/api/system/nation";
import { listDockor} from "@/api/his/dockor";
export default {
    name: 'OrganizationList',
    components: {
        NavCard,
        BreadCrumb,
    },
    data() {
        return {
          dockorList: [],
          // 遮罩层
          loading: true,
          // 导出遮罩层
          exportLoading: false,
          // 选中数组
          ids: [],
          // 非单个禁用
          single: true,
          // 非多个禁用
          multiple: true,
          // 显示搜索条件
          showSearch: true,
          // 总条数
          total: 0,
          // 国家机构表格数据
          nationList: [],
          // 弹出层标题
          title: "",
          // 是否显示弹出层
          open: false,
          // 查询参数
          queryParams: {
            pageNum: 1,
            pageSize: 10,
            registerNumber: null,
            institutionName: null
          },
          // 表单参数
          form: {},
          // 表单校验
          rules: {
            registerNumber: [
              { required: true, message: "登记号不能为空", trigger: "blur" }
            ],
            institutionName: [
              { required: true, message: "机构名称不能为空", trigger: "blur" }
            ],
          },
            personTotal: 25689,
            keyword:'',
            editDialogVisible: false,
            editData: null,

            tableData: [
                {
                    order: '01',
                    name: '毛石镇卫生院',
                    region: '毛石镇',
                    subjectCount: 30,
                    monitorCount: 40,
                    whiteListSwitch: '开',
                },
                {
                    order: '02',
                    name: '毛石镇卫生院',
                    region: '毛石镇',
                    subjectCount: 30,
                    monitorCount: 40,
                    whiteListSwitch: '开',
                },
            ],
            provinceOptions: [],
            cityOptions: [],
            districtOptions: [],
        }
    },
  created() {
    this.getList();
  },
    methods: {
      /** 查询国家机构列表 */
      getList() {
        this.loading = true;
        listNation(this.queryParams).then(response => {
          this.tableData = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          uniqueCode: null
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.uniqueCode)
        this.single = selection.length!==1
        this.multiple = !selection.length
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        this.title = "添加国家机构";
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        const registerNumber = row.number
        console.log(registerNumber)
        getNation(registerNumber).then(response => {
          this.form = response.data;
          this.open = true;
          this.title = "修改国家机构";
          this.getDockorList(response.data.registerNumber)
        });
      },
      getDockorList(registerNumber) {
        this.loading = true;
        this.queryParams.registerNumber = registerNumber
        listDockor(this.queryParams).then(response => {
          this.dockorList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.uniqueCode != null) {
              updateNation(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              });
            } else {
              addNation(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              });
            }
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const uniqueCodes = row.uniqueCode || this.ids;
        this.$modal.confirm('是否确认删除国家机构编号为"' + uniqueCodes + '"的数据项？').then(function() {
          return delNation(uniqueCodes);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        }).catch(() => {});
      },
      /** 导出按钮操作 */
      handleExport() {
        const queryParams = this.queryParams;
        this.$modal.confirm('是否确认导出所有国家机构数据项？').then(() => {
          this.exportLoading = true;
          return exportNation(queryParams);
        }).then(response => {
          this.$download.name(response.msg);
          this.exportLoading = false;
        }).catch(() => {});
      },
        editRegion(scope) {
            this.editData = scope.row
            this.editDialogVisible = true
        },
        handleClose() {
            this.editDialogVisible = false
            this.editData = null
        },
    }
}
</script>
<style lang="scss" scoped>
.list-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #F7F8FD;
}

.bread-crumb {
    margin-top: 21px;
    padding-left: 20px;
}

.title {
    font-size: 26px;
    color: #4B4B4B;
    font-weight: bold;
    margin: 0;
    margin-top: 18px;
    padding-left: 20px;
}

.detail {
    margin-top: 23px;
    margin-left: 20px;
    padding: 12px 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    border-radius: 5px;

    .search-input {
        width: 264px;
        height: 47px;
        background: #FFFFFF;
        border-radius: 5px;

        ::v-deep input {
            line-height: 45px;
            height: 47px;
            display: inline-block;
        }

        ::v-deep .el-input__icon {
            line-height: 45px;
            height: 45px;
            vertical-align: -0.15em;
            color: #4373F1;
        }
    }

    .table {
        flex: 1;
        background-color: #fff;
        margin: 13px 0 16px;

        ::v-deep .table-header-cell {
            background-color: #EBEFF8;
            padding-left: 21px;
            font-weight: 500;
            font-size: 16px;
            color: #414141;
        }
        .el-table {
            height: 100%;
        }
        ::v-deep .el-table__cell {
            padding-left: 21px;
            font-weight: 500;
            font-size: 16px;
            color: #414141;
        }
        :v-deep .el-table__body-wrapper {
            height: 100%;
        }
        :v-deep .el-table__empty-block {
            height: 100%;
        }
        .operation {
            display: flex;
            align-items: center;
            height: 100%;

            .view, .edit, .delete {
                cursor: pointer;
                font-weight: 500;
                font-size: 16px;
                color: #4373F1;
                height: 16px;
                line-height: 16px;
                background-repeat: no-repeat;
                background-position: 0 center;
                user-select: none;
            }
        }
    }
}

.edit-box {
    display: flex;
    flex-direction: column;
    align-items: center;

    ::v-deep .el-dialog__footer {
        display: none;
    }

    .row1 {
        display: flex;

        .el-select {
            margin-right: 7px;

            &:nth-last-child(1) {
                margin-right: 0;
            }
        }
    }

    .row2 {
        width: 100%;
        margin-top: 7px;

        .el-select {
            width: 100%;
        }
    }

    .submit {
        width: 164px;
        height: 56px;
        background: #4373F1;
        border-radius: 5px;
        user-select: none;
        line-height: 56px;
        color: #fff;
        text-align: center;
        margin-top: 22px;
        cursor: pointer;
    }
}
.edit-region {
    font-weight: 500;
    font-size: 16px;
    color: #4373F1;
    cursor: pointer;
}
::v-deep .el-dialog:not(.is-fullscreen) {
    margin-top: 40vh !important;
}
</style>
